<template>
    <div class="container role">
        <div class="container-top">
            <div class="top-name">角色管理</div>
        </div>
        <el-tabs v-model="url" @tab-click="handleClick">
            <el-tab-pane label="账户管理" name="accountList"></el-tab-pane>
            <el-tab-pane label="角色管理" name="roleList"></el-tab-pane>
        </el-tabs>
        <div class="input_modal">
            <div class="modal-list">
                <div class="input-item">
                    <span class="name">角色名称：</span>
                    <el-select
                        v-model='roleNameLike'
                        placeholder='-请选择-'
                        style="height: 30px;  line-height: 30px;width:170px;"
                        >
                        <el-option
                            label="全部"
                            value=""
                            style="height: 30px;  line-height: 30px;width:120px;"
                        ></el-option>
                        <el-option
                            v-for="item in roleArr"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.roleName"
                            style="height: 30px;  line-height: 30px;width:120px;"
                        ></el-option>
                    </el-select>    
                </div>
            </div>
            <div class="btns-top">
                <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                @click="getRoleList(1)"
                >查询</el-button>
                <el-button
                size="mini"
                icon="el-icon-refresh"
                @click="refresh"
                >重置</el-button>
            </div>
            <div class="input_modal add">
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="addItem"
                >新增角色</el-button>
            </div>
        </div>
        <div class="table_con"> 
            <el-table :data="tableData" stripe>
                  <el-table-column  prop="roleName"    label="角色名称" width='120'></el-table-column>
                  <el-table-column  prop="roleDescribe" label="角色描述"></el-table-column>
                  <el-table-column  prop="topPermissionNames" label="拥有权限"></el-table-column>
                  <el-table-column  prop=""  label="操作" fixed='right' width='140'>
                      <template slot-scope="scope">
                          <el-button @click="$router.push('/roleEdit?id='+ scope.row.id)" type="primary"  size="mini" >编辑</el-button>
                          <el-button type="danger" size="mini" @click="deleteRole(scope.row.id)">删除</el-button>
                      </template>
                  </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
             <el-pagination   @size-change="handleSizeChange"  @current-change="handleCurrentChange"       
                :current-page.sync="pageIndex"              
                :page-size="pageSize"   
                :page-sizes='[10,20,30,40]'    
                layout="sizes, prev, pager, next"       
                :total="pageCount">     
            </el-pagination>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    data() {
        return {
            roleArr:[],
            roleNameLike:'',
            actionShow:true,
            tableData:[],
            pageCount:null,
            pageIndex:1,
            pageSize:10,
            loading:true,
            url: 'roleList',
        }
    },
    mounted() {
        let path = this.$router.currentRoute.query.edit;
        if(path == 'edit'){
           window.location.reload();
          this.$router.push('/roleList');
        }
        this.getRoleList();
        this.getRoleArr()
    },
    methods: {
        refresh(){
            this.pageIndex = 1
            this.roleNameLike = ''
            this.getRoleList()
        },
        getRoleArr:function(){
           let url = CONSTANT.URL.SYSTEM.FINDAPPROLEBYPAGE;
           let dataForm = {
               pageIndex:1,
               pageSize:10000
           }
           common.post(url,{},(res)=>{
                let data = res.data;
                this.roleArr = data.bussData;
            }) 
        },
        getRoleList:function(){
           let url = CONSTANT.URL.SYSTEM.FINDAPPROLEBYPAGE;
           let dataForm = {
               pageIndex:this.pageIndex,
               pageSize:this.pageSize,
               roleNameLike:this.roleNameLike
           }
           this.loading = true;
           common.post(url,dataForm,(res)=>{
                this.loading = false;
                let data = res.data;
                this.tableData = data.bussData;
                this.pageCount = data.pageCount*this.pageSize;
            }) 
        },
        deleteRole:function(id) {
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.SYSTEM.DELETEROLEBYID;
                let param = {roleId:id} ;
                common.del(url,id,(res)=>{
                    if(res.code == 200){
                        this.$message({
                            type:'success',
                            message:'删除成功!'
                        });
                        this.getRoleList();
                    }
                    else{
                        this.$message({
                            type:'warning',
                            message:res.msg
                        })
                    }
                })      
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });    
        },
        addItem(){
            this.$router.push('/roleEdit')
        },
        handleSizeChange(val) {
            this.pageSize= val;
            this.getRoleList();
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getRoleList();
        },
        handleClick() {
            let url = '/'+ this.url;
            this.$router.push(url);
        },
        
    },
}
</script>
<style lang="scss">
    .role{
        .el-tabs__nav-wrap{
            padding:8px 10px; 
        }
    }
</style>